@tooltip-cls: ~"Tooltip";
@tooltip-max-width: 250px;

@tooltip-arrow-width: 5px;
@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
@animation-duration-base: 0.1s;
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);

/* 黑色风格 Black */
@tooltip-black-color: #fff;
@tooltip-black-bg: rgba(56, 56, 56, 1);
@tooltip-black-arrow-color: @tooltip-black-bg;

/* 白色风格 */
@tooltip-white-color: #000;
@tooltip-white-bg: rgba(255, 255, 255, 1);
@tooltip-white-arrow-color: @tooltip-white-bg;

.motion-common(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.motion-common-leave(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .@{className}-enter,
  .@{className}-appear {
    .motion-common(@duration);
    animation-play-state: paused;
  }
  .@{className}-leave {
    .motion-common-leave(@duration);
    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active,
  .@{className}-appear.@{className}-appear-active {
    animation-name: ~"@{keyframeName}In";
    animation-play-state: running;
  }
  .@{className}-leave.@{className}-leave-active {
    animation-name: ~"@{keyframeName}Out";
    animation-play-state: running;
    pointer-events: none;
  }
}

.move-motion(@className, @keyframeName) {
  .make-motion(@className, @keyframeName);
  .@{className}-enter,
  .@{className}-appear {
    opacity: 0;
    animation-timing-function: @ease-out-circ;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-circ;
  }
}

.placement-arrow-color(@color, @arrowColor) {
  .@{color}.@{tooltip-cls}-placement-top,
  .@{color}.@{tooltip-cls}-placement-topLeft,
  .@{color}.@{tooltip-cls}-placement-topRight {
    .@{tooltip-cls}-arrow {
      border-top-color: @arrowColor;
    }
  }

  .@{color}.@{tooltip-cls}-placement-right,
  .@{color}.@{tooltip-cls}-placement-rightBottom,
  .@{color}.@{tooltip-cls}-placement-rightTop {
    .@{tooltip-cls}-arrow {
      border-right-color: @arrowColor;
    }
  }

  .@{color}.@{tooltip-cls}-placement-bottom,
  .@{color}.@{tooltip-cls}-placement-bottomLeft,
  .@{color}.@{tooltip-cls}-placement-bottomRight {
    .@{tooltip-cls}-arrow {
      border-bottom-color: @arrowColor;
    }
  }

  .@{color}.@{tooltip-cls}-placement-left,
  .@{color}.@{tooltip-cls}-placement-leftBottom,
  .@{color}.@{tooltip-cls}-placement-leftTop {
    .@{tooltip-cls}-arrow {
      border-left-color: @arrowColor;
    }
  }
}

.placement-arrow-color(Tooltip-black, @tooltip-black-arrow-color);
.placement-arrow-color(Tooltip-white, @tooltip-white-arrow-color);

.@{tooltip-cls} {
  position: absolute;
  z-index: 1060;
  display: block;
  visibility: visible;
  font-size: 12px;
  line-height: 1.5;

  &-hidden {
    display: none;
  }

  &-white .@{tooltip-cls}-wrapper {
    background-color: @tooltip-white-bg;
    box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  &-black .@{tooltip-cls}-wrapper {
    color: @tooltip-black-color;
    background-color: @tooltip-black-bg;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
  }

  &-wrapper {
    max-width: @tooltip-max-width;
    padding: 8px 10px;
    text-decoration: none;
    border-radius: 3px;
    word-break: break-word;
  }

  &-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  /* top start */
  &-placement-top,
  &-placement-topLeft,
  &-placement-topRight {
    padding: 5px 0 8px;
    .@{tooltip-cls}-arrow {
      bottom: @tooltip-distance - @tooltip-arrow-width;
      border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    }
  }
  &-placement-top &-arrow {
    left: 50%;
    margin-left: -@tooltip-arrow-width;
  }
  &-placement-topLeft &-arrow {
    left: 16px;
  }
  &-placement-topRight &-arrow {
    right: 16px;
  }
  /* top end */

  /* right start */
  &-placement-right,
  &-placement-rightBottom,
  &-placement-rightTop {
    padding: 0 5px 0 8px;
    .@{tooltip-cls}-arrow {
      left: @tooltip-distance - @tooltip-arrow-width;
      border-width: @tooltip-arrow-width @tooltip-arrow-width
        @tooltip-arrow-width 0;
    }
  }
  &-placement-right &-arrow {
    top: 50%;
    margin-top: -@tooltip-arrow-width;
  }
  &-placement-rightTop &-arrow {
    top: 8px;
  }
  &-placement-rightBottom &-arrow {
    bottom: 8px;
  }
  /* right end */

  /* bottom start */
  &-placement-bottom,
  &-placement-bottomLeft,
  &-placement-bottomRight {
    padding: 8px 0 5px;
    .@{tooltip-cls}-arrow {
      top: @tooltip-distance - @tooltip-arrow-width;
      border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    }
  }
  &-placement-bottom &-arrow {
    left: 50%;
    margin-left: -@tooltip-arrow-width;
  }
  &-placement-bottomLeft &-arrow {
    left: 16px;
  }
  &-placement-bottomRight &-arrow {
    right: 16px;
  }
  /* bottom end */

  /* left start */
  &-placement-left,
  &-placement-leftBottom,
  &-placement-leftTop {
    padding: 0 8px 0 5px;
    .@{tooltip-cls}-arrow {
      right: @tooltip-distance - @tooltip-arrow-width;
      border-width: @tooltip-arrow-width 0 @tooltip-arrow-width
        @tooltip-arrow-width;
    }
  }
  &-placement-left &-arrow {
    top: 50%;
    margin-top: -@tooltip-arrow-width;
  }
  &-placement-leftTop &-arrow {
    top: 8px;
  }
  &-placement-leftBottom &-arrow {
    bottom: 8px;
  }
  /* left end */
}

.move-motion(Tooltip-move-top, tooltipTopMove);
.move-motion(Tooltip-move-bottom, tooltipBottomMove);
.move-motion(Tooltip-move-left, tooltipLeftMove);
.move-motion(Tooltip-move-right, tooltipRightMove);

@keyframes tooltipTopMoveIn {
  0% {
    transform-origin: 50% 50%;
    transform: translateY(8px);
    opacity: 0;
  }
  100% {
    transform-origin: 50% 50%;
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes tooltipTopMoveOut {
  0% {
    transform-origin: 50% 50%;
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform-origin: 50% 50%;
    transform: translateY(8px);
    opacity: 0;
  }
}

@keyframes tooltipBottomMoveIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: translateY(0px);
  }
}
@keyframes tooltipBottomMoveOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: translateY(-8px);
  }
}

@keyframes tooltipLeftMoveIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: translateX(8px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: translateX(0px);
  }
}
@keyframes tooltipLeftMoveOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: translateX(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: translateX(8px);
  }
}

@keyframes tooltipRightMoveIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: translateX(-8px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: translateX(0px);
  }
}
@keyframes tooltipRightMoveOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: translateX(0px);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: translateX(-8px);
  }
}
